<template>
	<view class="recomment">
		<view class="left"><image class="avatar" :src="$attrs.avatar"></image></view>
		<view class="right">
			<view class="top">
				<text class="realname">{{ $attrs.realname }}</text>
				<text class="time">{{ $attrs.time | format }}</text>
				<i class="iconfont icondianzan" @click="addGoodNum"></i>
				<text class="goodNum">{{ goodNum }}</text>
				<i class="iconfont iconshanchu" @click="startDelRecomment"></i>
			</view>
			<view class="bottom" @click="startAddRecomment">
				<text class="who">@{{ $attrs.realname }}</text>
				{{ $attrs.content }}
			</view>
		</view>
	</view>
</template>

<script>
import { formatTime } from '../../formatTime.js';
export default {
	data() {
		return {
			goodNum:this.$attrs.goodNum
		};
	},

	filters: {
		format(val) {
			return formatTime(parseInt(val));
		}
	},
	methods: {
		addGoodNum(){
			uni.request({
				method:"post",
				header:{
					Authorization: uni.getStorageSync('LoginToken')
				},
				url:"https://www.ttzxh.icu:443/api/recomment/update",
				data:{
					id:this.$attrs.id,
					goodNum:this.goodNum+1
				},
				complete: () => {
					this.goodNum+=1
				}
			})
		},
		startDelRecomment() {
			uni.$emit('startDelRecomment', this.$attrs);
		},
		startAddRecomment(){
			uni.$emit("startAddRecomment", this.$attrs)
		}
	}
};
</script>

<style scoped lang="scss">
.recomment {
	margin: 7px 0 10px 50px;
	width: calc(100% - 50px);
	display: flex;
	transition: all .3s;
	&:active{
		background-color: $uni-text-active-color;
	}
	.left {
		margin-right: 5px;
		.avatar {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			background-color: #ddd;
		}
	}
	.right {
		.top {
			color: #4ebbf7;
			font-size: 13px;
			i {
				margin: 0 3px 0 10px;
				color: $uni-dianzan;
				&:nth-child(1) {
					color: red;
				}
			}
			.time {
				margin-left: 10px;
			}
			.iconshanchu {
				color: red;
				margin-left: 10px;
			}
		}
		.bottom {
			font-size: 14px;
			color: #fff;
			.who {
				color: #ddd;
				margin-right: 5px;
			}
		}
	}
}
</style>
